<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
         width:400px;
         height:400px;
         margin:50px auto; 
         transition:5s linear;
        }
        .box div{
         width:180px;
         height:180px;
         margin:10px;
         border:1px solid #000; 
         box-sizing:border-box;
         float:left;
         background:green;
        }
        .box div:nth-child(1),.box div:nth-child(4){ 
         border-radius:0 60%;
        }
        .box div:nth-child(2),.box div:nth-child(3){ 
         border-radius:60% 0;
        }
        .box:hover{
         transform:rotate(720deg);
        }
        </style>
        </head>
        <body>
        <div class="box">
         <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    
</body>
</html>